<template>
  <div>
    <div class="header">
      <input v-model="isAllChecked" type="checkbox" />
      <input
        @keyup.enter="keyupHandler"
        v-model.trim="taskName"
        class="input"
        type="text"
        placeholder="请输入目标任务名称"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      taskName: "",
    };
  },
  methods: {
    keyupHandler() {
      this.$emit("addTask", this.taskName);
      this.taskName = "";
    },
  },
  computed: {
    isAllChecked: {
      set(value) {
        this.$emit("allChecked", value);
      },
      get() {
        return this.list.every((e) => e.isDone);
      },
    },
  },
};
</script>

<style lang='less' scoped>
.header {
  padding: 10px;
  box-shadow: 0 0 5px #cfcfcc;
  .input {
    border: none;
    outline: none;
    font-size: 20px;
  }
}
</style>